<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration-line: none;
        }
    </style>
</head>
<body>
    <div id="root">

    </div>
</body>
<script>
    // let str ="a'b'\"my\"";
    // let str1 = 'b"lala"\'xixi\'';
    // let str2 = `c'单引号'"双引号"`;
    // let str3 = str+"|"+str1+"|"+str2;
    // let str4 = `${str}|${str1}|${str2}`
    // console.log(str3,str4);

    const root = document.querySelector("#root");
    const xhr = new XMLHttpRequest();
    xhr.responseType = "json";
    xhr.open("get","/jd");
    xhr.send();
    xhr.onload = function(){
        // console.log(xhr.response);
        // xhr.response.forEach(item=>{
        //     root.innerHTML+="<div><a href='"+item.navUrl+"'>" +
        //         "<img title='"+item.navId+"' src='"+item.navIcon.active+"'/>" +
        //         "<img  title='"+item.navId+"' src='"+item.navIcon.def +"'/>" +
        //         "</a></div>"
        // })

        root.innerHTML = xhr.response.map(item=>(`
            <div>
                <a href="/" target="_blank">
                    <img title="${item.navId}" src="${item.navIcon.active}" alt="">
                    <img title="${item.navId}"  src="${item.navIcon.def}" alt="">
                </a>
            </div>
        `)).join("")
    }



</script>
</html>